<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <link rel="stylesheet" href="/css/profile.css">

    <!-- <van-nav-bar title="基本资料" left-text="返回" left-arrow @click-left="back"></van-nav-bar> -->

    <div class="user">
        <div class="user-image">
            <img :src="business.avatar_text" />
        </div>
    </div>

    <!-- 表结构 -->
    <van-form @submit="profile" class="form" style="overflow: hidden;">
        <!-- 昵称 -->
        <van-field v-model="business.nickname" name="nickname" label="昵称" placeholder="请输入昵称"
            :rules="[{ required: true, message: '请输入昵称' }]" />

        <!-- 手机号码 -->
        <van-field v-model="business.mobile" name="mobile" label="手机号码" placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请输入手机号码' }]" />

        <!-- 邮箱 -->
        <van-field v-model="business.email" name="email" label="邮箱" placeholder="请输入邮箱"
            :rules="[{ required: true, message: '请输入邮箱' }, { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9._]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确' }]" />

        <!-- 密码 -->
        <van-field v-model="business.password" type="password" name="password" label="密码" placeholder="请输入密码" />

        <!-- 性别 -->
        <van-field name="gender" label="性别">
            <template #input>
                <van-radio-group v-model="business.gender" direction="horizontal">
                    <van-radio name="0">保密</van-radio>
                    <van-radio name="1">男</van-radio>
                    <van-radio name="2">女</van-radio>
                </van-radio-group>
            </template>
        </van-field>

        <!-- 地区 -->
        <van-field v-model="business.region_text" is-link readonly name="region" label="地区选择" placeholder="点击选择省市区"
            @click="AreaShow = true" />

        <!-- 弹出框组件 -->
        <van-popup v-model:show="AreaShow" position="bottom">
            <!-- 地区组件 -->
            <van-area v-model="code" title="省市区" :area-list="areaList" @cancel="AreaShow = false"
                @confirm="AreaConfirm" />
        </van-popup>

        <!-- 头像上传 -->
        <van-field name="avatar" label="上传头像">
            <!-- 插槽重新输入框部分，用文件上传来代替 -->
            <template #input>
                <van-uploader v-model="avatar" :max-count="1" />
            </template>
        </van-field>

        <div style="width:66%; margin:2em auto;">
            <van-button :loading="loading" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
                native-type="submit">提交</van-button>
        </div>
    </van-form>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';

//引入地区数据
import { areaList } from '@vant/area-data'

const { proxy } = getCurrentInstance();

// 获取个人资料信息
let business = proxy.$business

//地区显示的变量
let AreaShow = ref(false)
let code = ref(business.value.district || business.value.city || business.value.province)

//改变地区
const AreaConfirm = async ({ selectedOptions }) => {
    //弹出框隐藏
    AreaShow.value = false

    //更换中文字
    business.value.region_text = selectedOptions.map((item) => item.text).join('-')

    //地区码更换
    code.value = selectedOptions.map((item) => item.value).pop()
}

//头像数据
let avatar = ref([{
    url: business.value.avatar_text
}])

let loading = ref(false)

//修改个人资料
const profile = async (values) => {
    //修改loading状态
    loading.value = true

    //组装数据
    var params = {
        id: business.value.id,
        nickname: values.nickname,
        mobile: values.mobile,
        gender: values.gender,
        email: values.email,
    }

    //密码不为空在增加
    if (values.password) {
        params.password = values.password
    }

    //地区码
    if (code.value) {
        params.code = code.value
    }

    //判断是否有图片上传
    if (values.avatar[0].file) {
        params.avatar = values.avatar[0].file
    }

    //接口调用
    if (params.avatar) //有图片
    {
        var result = await proxy.$UPLOAD({
            url: '/business/profile',
            params
        })
    } else  //没有图片
    {
        // eslint-disable-next-line no-redeclare
        var result = await proxy.$POST({
            url: '/business/profile',
            params
        })
    }

    //停止loading状态
    loading.value = false

    if (result.code == 1) {
        proxy.$success({
            message: result.msg,
            onClose: () => {
                proxy.$router.go(-1)
            }
        })
    } else {
        proxy.$fail(result.msg)
    }
}
</script>
